<div *ngIf="editing != null" class="item-editor">
    <div class="item-editor-header">
        <span>Editing:</span>
        <slot [item]="editing" [hoverable]="false"></slot>
        <span>{{editing?.name}}</span>
    </div>
    <div class="item-editor-enchants">
        <div *ngFor="let enchant of editing.enchants; let enchantSlot = index">
            <enchant-slot [item]="editing" [slot]="enchantSlot"></enchant-slot>
        </div>
    </div>
    <div class="item-editor-footer">
        <div class="item-editor-gem-button" (click)="onRerollGems()"></div>
        <div class="gem-sockets" *ngFor="let socket of editing.gems">
            <gem-socket [socket]="socket"></gem-socket>
        </div>
    </div>
    <div class="item-editor-footer-2">
        <div *ngIf="editing.empowerable" class="item-editor-footer item-editor-label">
            <div class="checkbox" [attr.checked]="editing.empowered" (click)="toggleEmpowered()"></div> Empowered?
        </div>
        <div *ngIf="editing.item.possibleRarities.length > 1" class="dropdown">
            <button class="btn short-dropdown item-editor-label" type="button" data-toggle="dropdown">
              {{rarityName(editing.rarity)}}
            </button>
            <div class="dropdown-menu">
              <button *ngFor="let rarity of editing.item.possibleRarities" class="dropdown-item btn short-button item-editor-label" type="button" (click)="setRarity(rarity)">{{rarityName(rarity)}}</button>
            </div>
        </div>
        <div *ngIf="editing.item.minLevel != character.level">
            Level: <input type="number" class="text-input" min="{{editing.item.minLevel}}" max="{{character.level}}" [value]="editing.level" #levelSpinner (change)="onSetLevel(levelSpinner)" (focusout)="onSetLevel(levelSpinner)">
        </div>
    </div>
</div>
